<template>
  <Head title="" isBack>
    <template #content>
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="company-info">
        <div class="info-item">企业名称：{{ data.companyData.orgName }}</div>
        <div class="info-item">组织机构代码：{{ data.companyData.code }}</div>
      </div>
      <div class="edit-line"></div>
      <div class="line-card">
        <div class="right-card">
          <div class="dividend-title">
            <div class="card-title">充电业务</div>
          </div>
          <div class="charge-data">
            <div class="charge-data-item">
              <div class="charge-info">
                <div class="card-title">充电电量（度）</div>
                <div class="info">
                  {{
                    data.detailData.totalPower
                      ? formatNumber(data.detailData.totalPower)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">服 务 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data.detailData.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">电 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data.detailData.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="charge-data-item charge-data-item1">
              <div class="charge-info">
                <div class="card-title">订单金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data.detailData.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">优惠抵扣（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data.detailData.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">实收金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data.detailData.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-card">
          <div class="dividend-title">
            <div class="card-title">互联互通对账</div>
          </div>
          <div class="charge-info">
            <div class="card-title">对账支付金额（元）</div>
            <div class="info">
              {{
                data.detailData1.resultAmount
                  ? formatNumber(data.detailData1.resultAmount)
                  : '--'
              }}
            </div>
          </div>
          <div class="charge-info">
            <div class="card-title">平台计费（元）</div>
            <div class="info">
              {{
                data.detailData1.amount
                  ? formatNumber(data.detailData1.amount)
                  : '--'
              }}
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="电桩充电汇总" name="station">
          <Table
            ref="tableRef"
            v-show="data.activeTab === 'station'"
            :columns="data.columns"
            :toolbar="data.toolbar"
            @get-list="getData"
          >
          </Table>
        </el-tab-pane>
        <el-tab-pane label="充电订单" name="order">
          <Table
            v-if="data.activeTab === 'order'"
            ref="tableStationRef"
            :columns="orderData.columns"
            :toolbar="orderData.toolbar"
            @get-list="getOrderData"
          ></Table
        ></el-tab-pane>
        <el-tab-pane label="互联对账结果" name="interconnect">
          <Table
            v-if="data.activeTab === 'interconnect'"
            ref="tableInterRef"
            :columns="interconnectData.columns"
            :toolbar="interconnectData.toolbar"
            @get-list="getInterconnectData"
          ></Table
        ></el-tab-pane>
      </el-tabs>
    </template>
  </Head>
</template>
      
<script lang="ts" setup name="InteFinancialDetail">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingStationTotalSeq,
  pagingOperatorEquipmentInfo,
  getStationTotalInfo,
  queryOrgConfig,
  EXPORT_OPERATOREQUIPMENTINFO,
  EXPORT_STATINTOTALSEQ,
  getCecTotalInfo,
  reconciliationQueryPage,
  EXPORT_RECONCILIATION,
} from '@/service/apis/financial';
import { formatNumber, exportFile } from '@/utils/utils';

const router = useRouter();
const route = useRoute();

const tableRef = ref();
const tableStationRef = ref();
const tableInterRef = ref();

const {
  query: { id, orgId, timeType, time, orgType },
} = route;

const data = reactive({
  isOne: true,
  activeProfitTab: '',
  dataList: [] as any,
  detailData: {} as any,
  detailData1: {} as any,
  companyData: {} as any,
  activeTab: 'station',
  formData: {} as any,
  shareProfitId: '',
  type: 0,
  columns: [
    {
      prop: 'equipmentCode',
      label: '电桩编号',
    },
    {
      prop: 'equipmentName',
      label: '电桩名称',
    },
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'power',
      label: '功率（kW）',
    },
    {
      prop: 'totalPower',
      label: '充电电量',
      dataType: String,
    },
    {
      prop: 'count',
      label: '充电次数',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费',
      dataType: String,
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费',
      dataType: String,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
      dataType: String,
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣',
      dataType: String,
    },
    {
      prop: 'actualAmount',
      label: '实收金额',
      dataType: String,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_OPERATOREQUIPMENTINFO, '电桩充电汇总', data.formData);
      },
    },
  ],
});
const orderData = reactive({
  columns: [
    {
      prop: 'startChargeSeq',
      label: '订单编号',
    },
    {
      prop: 'orgName',
      label: '用户归属企业',
    },
    {
      prop: 'startTime',
      label: '充电开始时间',
    },
    {
      prop: 'endTime',
      label: '充电结束时间',
    },
    {
      prop: 'totalPower',
      label: '充电电量',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费',
      dataType: String,
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费',
      dataType: String,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
      dataType: String,
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣',
      dataType: String,
    },
    {
      prop: 'actualAmount',
      label: '实收金额',
      dataType: String,
    },
    {
      prop: 'chargeSource',
      label: '订单类型',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_STATINTOTALSEQ,
          `充电订单列表（${data.companyData.orgName}）`,
          data.formData
        );
      },
    },
  ],
});
const interconnectData = reactive({
  columns: [
    {
      prop: 'flowStartChargeSeq',
      label: '互联互通流水号',
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'connectorId',
      label: '终端编码',
    },
    {
      prop: 'startChargeSeq',
      label: '平台订单号',
    },
    {
      prop: 'resultPayTime',
      label: '订单支付时间',
    },
    {
      prop: 'resultAmount',
      label: '订单金额',
    },
    {
      prop: 'resultPowerAmount',
      label: '电费',
    },
    {
      prop: 'resultServiceAmount',
      label: '服务费',
    },
    {
      prop: 'diffAmount',
      label: '对账差额',
      askContent: '对账支付金额-平台计费',
    },
    {
      prop: 'type',
      label: '争议类型',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const formData = Object.assign(data.formData, { orgId });
        exportFile(
          EXPORT_RECONCILIATION,
          `互联互通列表（${data.companyData.orgName}）`,
          formData
        );
      },
    },
  ],
});

const handleClickTab = (e: any) => {
  console.log(e.props.name);
  if (e.props.name === 'order') {
    data.type = 1;
    tableStationRef.value?.handleQuery();
  } else if (e.props.name === 'interconnect') {
    data.type = 2;
    tableInterRef.value?.handleQuery();
  } else {
    data.type = 0;
    tableRef.value?.handleQuery();
  }
};

const getTab = (value: any) => {
  if (data.isOne) {
    value.time = time;
    value.timeType = timeType;
    data.isOne = false;
  }

  data.formData = Object.assign(data.formData, value);
  getStationInfo();
  getCecInfo();

  if (data.type === 0) {
    tableRef.value?.handleQuery();
  } else if (data.type === 1) {
    tableStationRef.value?.handleQuery();
  } else {
    tableInterRef.value?.handleQuery();
  }
};

const getStationInfo = () => {
  data.formData = Object.assign(data.formData, { operatorTotalId: id });
  getStationTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
};

// getStationInfo();

const getCecInfo = () => {
  data.formData = Object.assign(data.formData, { orgId, orgType });
  getCecTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData1 = res;
    } else {
      data.detailData1 = {};
    }
  });
};
// getCecInfo();

const getData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    operatorTotalId: id,
    equipmentGroup: '1',
  });
  console.log('formData======', data.formData);

  pagingOperatorEquipmentInfo(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getOrderData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    operatorTotalId: id,
    chargeSeqGroup: '1',
  });
  pagingStationTotalSeq(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getInterconnectData = (page: any, search: any) => {
  const formData = Object.assign(data.formData, { orgId: id });
  reconciliationQueryPage(formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getInterconnectData(page, search);
        return;
      }
      nextTick(() => {
        tableInterRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
queryDicByParent({
  listDtos: ['chargeSourceEnum', 'recStatus'],
}).then((res: any) => {
  if (res) {
    orderData.columns[10].dic = [...res.chargeSourceEnum];
    interconnectData.columns[9].dic = [...res.recStatus];
  }
});

queryOrgConfig({ id }).then((res: any) => {
  if (res) {
    data.companyData = res;
  } else {
    data.companyData = {};
  }
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
@import './index.scss';
.company-info {
  background: #c6e2ff;
  display: flex;
  padding: 10px;
  margin-top: 10px;
  .info-item {
    font-size: 14px;
    line-height: 28px;
    margin: 0 20px;
  }
}
</style>
  